<%-- 
    Document   : testGoogleMaps
    Created on : 18-nov-2012, 17:56:57
    Author     : froy
--%><%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=no">-->
        <meta charset="utf-8">
        <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
        <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
            var geocoder;
            var map;
            function initialize() {
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(20.672782192574566, -101.26407611572267);
                var mapOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
                codeAddress();
            }

            function codeAddress() {
                var address = document.getElementById('address').value;
                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        console.log(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
        </script>
    </head>
    <body onload="initialize()">
        <div>
            <input id="address" type="textbox" value="7755 Irvine Center Drive">
            <input type="button" value="Geocode" onclick="codeAddress()">
        </div>
        <div id="map_canvas" style="width: 450px ;height:400px;top:30px"></div>
    </body>
</html>